<template>
    <div>
        <div class="show-pc" v-if="isPc">
            <div class="menu-container" style="color: var( --color-text);">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItems" :key="item.orderNum" class="menu-item"
                    :class="{ active: activeKey === item.orderNum }" @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.orderNum ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.columnName }}
                </div>
                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItems" class="more-button" @click="showHiddenItems = true"
                    @mouseenter="showHiddenItems = true">
                    <div class="drop_box">
                        <img src="../../../assets/images/new_img/点9.png" alt="" class="drop_img ">
                    </div>
                    <!-- 隐藏的菜单项（悬浮显示） -->
                    <div v-show="showHiddenItems" class="hidden-menu-items" @mouseleave="showHiddenItems = false">
                        <div v-for="item in hiddenMenuItems" :key="item.orderNum" class="menu-item"
                            :class="{ active: activeKey === item.orderNum }" @click="handleMenuClick(item)"
                            :style="{ color: activeKey === item.orderNum ? 'var(--color-Sel)' : 'inherit' }">
                            {{ item.columnName }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-wap" v-if="!isPc">
            <div style="color: var(--color-text);" class="menu-container-wap">
                <!-- 显示前7个菜单项 -->
                <div v-for="item in visibleMenuItemsWap" :key="item.orderNum"
                    :class="{ active: activeKey === item.orderNum }" @click="handleMenuClick(item)"
                    :style="{ color: activeKey === item.orderNum ? 'var(--color-Sel)' : 'inherit' }">
                    {{ item.columnName }}
                </div>

                <!-- 显示更多按钮 -->
                <div v-if="hasHiddenItemsWap" @click.stop="toggleHiddenItems"
                    style=" display: flex;justify-content: center;align-items: center;">

                    <img src="../../../assets/images/new_img/点9.png" alt="" class="drop_img-wap">


                </div>
                <!-- 隐藏的菜单项（点击显示） -->
                <div v-if="showHiddenItems" class="hidden-menu-items-wap" @click.stop>
                    <div class="hidden-menu-items-wap-mask" @touchstart.stop="showHiddenItems = false" @click.stop="showHiddenItems = false"></div>
                    <div v-for="item in hiddenMenuItemsWap" :key="item.orderNum"
                        :class="{ active: activeKey === item.orderNum }" @click="handleMenuClick(item)"
                        :style="{ color: activeKey === item.orderNum ? 'var(--color-Sel)' : 'inherit' }"
                        style="margin-top: 6px;position: relative;z-index: 82;">
                        {{ item.columnName }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, watch, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from '@/store'
import { useHttp } from '@/api/http'
import qs from 'qs'

const { themeStore } = useStore()
const searchPosition = ref()
const isPc = ref(true)
const props = defineProps({
    activeKey: ''
});

const emits = defineEmits(['menuClick']);

const router = useRouter();
const route = useRoute();

const menuList = ref([]);



watch(() => themeStore.searcShow.visible, (newValue, oldValue) => {
    searchPosition.value = newValue;
});
let currentHref = location.href;

onMounted(() => {
    isPc.value = window.innerWidth > 800


    // setInterval(() => {
    //     if (location.href !== currentHref) {
    //         console.log('URL 已改变:', location.href);
    //         currentHref = location.href;

    //         // 执行你的处理逻辑
    //     }
    // }, 500);

    // 监听浏览器历史记录变化（popstate 事件）
    window.addEventListener('popstate', (event) => {
        if(route.query.columnId) {
            handleMenuClick({
                visible: true,
                txet: route.query.title,
                title: route.query.title,
                columnId: route.query.columnId,
                keyWord: "",
                inputValue: '',
                activeKey: route.query.activeKey
            })
        }
    });
})

// 控制是否显示隐藏项
const showHiddenItems = ref(false);

// 计算属性：可见的菜单项（前7个）
const visibleMenuItems = computed(() => menuList.value.slice(0, 7));

// 计算属性：隐藏的菜单项（第8个及以后）
const hiddenMenuItems = computed(() => menuList.value.slice(7));

// 计算属性：是否有隐藏项
const hasHiddenItems = computed(() => hiddenMenuItems.value.length > 0);

// 手机端
// 计算属性：可见的菜单项（前4个）
const visibleMenuItemsWap = computed(() => menuList.value.slice(0, 3));

// 计算属性：隐藏的菜单项（第5个及以后）
const hiddenMenuItemsWap = computed(() => menuList.value.slice(3));

// 计算属性：是否有隐藏项
const hasHiddenItemsWap = computed(() => hiddenMenuItemsWap.value.length > 0);



// 菜单点击处理
const handleMenuClick = (item) => {

    Object.assign(themeStore.searcShow, {
        visible: searchPosition.value,
        txet: item.columnName,
        title: item.columnName,
        columnId: item.id,
        keyWord: "",
        inputValue: '',
        activeKey:item.orderNum
    });
  
    
    emits('menuClick', item.orderNum);
    if (item.columnLink) {
        router.push('/AImap');
    } else {
        try {
            document.getElementById('searchIndex').click()
            history.pushState(null, '', `/standardPath?${qs.stringify(themeStore.searcShow)}`);
        } catch (e) {
            
            router.push({
                path: `/standardPath/`,
                query: {
                    ...themeStore.searcShow,
                }
            })

        }
    }
    showHiddenItems.value = false; // 点击后隐藏下拉菜单
};

const getMenuItems = () => {
    useHttp.get('/web/index/treeList').then(res => {
        menuList.value = res.result
        themeStore.menuList = res.result


    }).catch(err => {
    })
}
getMenuItems()

// 手机端点击事件
const toggleHiddenItems = () => {
    showHiddenItems.value = !showHiddenItems.value;
},
    handleHiddenItemClick = (item) => {
        this.handleMenuClick(item);
        showHiddenItems.value = false;
    }

</script>

<style lang="less" scoped>
.drop_img.dark {
    display: none;
}

html.dark .drop_img.light {
    display: none;
}

html.dark .drop_img.dark {
    display: block;
}

.menu-container {
    width: 44vw;
    max-width: 50vw;
    display: flex;
    align-items: center;
    border-radius: 0.2vw;
    position: relative;
    gap: 0.52vw;

    .menu-item {
        padding: 0px 0.3vw;
        cursor: pointer;
        white-space: nowrap;
        font-size: 0.83vw;
        color: #999999;


    }

    .more-button {
        width: 4.16vw;
        position: relative;
        padding: 0.41vw 0.62vw;
        font-size: 0.83vw;
        color: #999999;
        font-weight: 500;

        .drop_box {
            width: 1.8vw;
            height: 0.4vw;
            display: flex;
            align-items: center;
            justify-content: center;

            .drop_img {
                width: 100%;
                height: 100%;
            }
        }

        .hidden-menu-items {
            position: absolute;
            top: 3vw;
            right: 0;
            border: 1px solid var(--border-ls);
            border-radius: 0.2vw;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 99;
            display: flex;
            gap: 0.4vw;
            flex-direction: column;
            padding: 10px;
            background-color: var(--color-bg);
        }

        .hidden-menu-items::before {
            content: " ";
            position: absolute;
            width: 100%;
            height: 3vw;
            top: -3vw;
            left: 0;
        }
    }
}

.menu-container-wap {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-16px);
    position: relative;
    flex-wrap: nowrap;




    .hidden-menu-items-wap {
        position: absolute;
        top: 40px;
        right: 0;
        background-color: var(--color-bg);
        padding: 10px;
        font-size: var(--text-16px);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-ls);

        .hidden-menu-items-wap-mask {
            position: fixed;
            width: 100vw;
            height: 100vh;
            z-index: 80;
            left: 0;
            top: 0;
        }
    }


    .drop_img-wap {
        width: 32px;
        height: 8px;
    }



}
</style>